<template>
  <div class="quick-actions">
    <div class="actions-header">
      <h3 class="actions-title">빠른 작업</h3>
      <div class="actions-subtitle">원클릭으로 주요 기능에 액세스하세요</div>
    </div>

    <div class="actions-grid">
      <!-- 스테이킹 -->
      <div class="action-card stake-card" @click="handleStake">
        <div class="card-icon">
          <el-icon><Lock /></el-icon>
        </div>
        <div class="card-content">
          <h4 class="card-title">스테이킹</h4>
          <p class="card-description">NEAR를 스테이킹하여 보상을 받으세요</p>
          <div class="card-stats">
            <span class="stat-label">연 수익률</span>
            <span class="stat-value positive">12.5%</span>
          </div>
        </div>
        <div class="card-arrow">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>

      <!-- 언스테이킹 -->
      <div class="action-card unstake-card" @click="handleUnstake">
        <div class="card-icon">
          <el-icon><Unlock /></el-icon>
        </div>
        <div class="card-content">
          <h4 class="card-title">언스테이킹</h4>
          <p class="card-description">스테이킹된 NEAR를 해제하세요</p>
          <div class="card-stats">
            <span class="stat-label">스테이킹 중</span>
            <span class="stat-value">850 NEAR</span>
          </div>
        </div>
        <div class="card-arrow">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>

      <!-- 전송 -->
      <div class="action-card transfer-card" @click="handleTransfer">
        <div class="card-icon">
          <el-icon><Promotion /></el-icon>
        </div>
        <div class="card-content">
          <h4 class="card-title">전송</h4>
          <p class="card-description">다른 주소로 NEAR를 전송하세요</p>
          <div class="card-stats">
            <span class="stat-label">사용 가능</span>
            <span class="stat-value">400 NEAR</span>
          </div>
        </div>
        <div class="card-arrow">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>

      <!-- 거래 내역 -->
      <div class="action-card history-card" @click="handleHistory">
        <div class="card-icon">
          <el-icon><Document /></el-icon>
        </div>
        <div class="card-content">
          <h4 class="card-title">거래 내역</h4>
          <p class="card-description">최근 거래 기록을 확인하세요</p>
          <div class="card-stats">
            <span class="stat-label">최근 거래</span>
            <span class="stat-value">{{ formatTimeAgo(lastTxTime) }}</span>
          </div>
        </div>
        <div class="card-arrow">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>

      <!-- DeFi -->
      <div class="action-card defi-card" @click="handleDeFi">
        <div class="card-icon">
          <el-icon><TrendCharts /></el-icon>
        </div>
        <div class="card-content">
          <h4 class="card-title">DeFi</h4>
          <p class="card-description">NEAR 생태계 DeFi 프로토콜</p>
          <div class="card-stats">
            <span class="stat-label">TVL</span>
            <span class="stat-value">$1.2B</span>
          </div>
        </div>
        <div class="card-arrow">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>

      <!-- NFT -->
      <div class="action-card nft-card" @click="handleNFT">
        <div class="card-icon">
          <el-icon><Picture /></el-icon>
        </div>
        <div class="card-content">
          <h4 class="card-title">NFT</h4>
          <p class="card-description">NFT 컬렉션을 관리하세요</p>
          <div class="card-stats">
            <span class="stat-label">보유 NFT</span>
            <span class="stat-value">12개</span>
          </div>
        </div>
        <div class="card-arrow">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
    </div>

    <!-- 최근 거래 요약 -->
    <div class="recent-transactions">
      <div class="transactions-header">
        <h4 class="transactions-title">최근 거래</h4>
        <el-button text type="primary" @click="handleHistory">
          전체 보기
          <el-icon><ArrowRight /></el-icon>
        </el-button>
      </div>
      
      <div class="transactions-list">
        <div 
          v-for="tx in recentTransactions" 
          :key="tx.id"
          class="transaction-item"
        >
          <div class="tx-icon" :class="tx.type">
            <el-icon v-if="tx.type === 'stake'"><Lock /></el-icon>
            <el-icon v-else-if="tx.type === 'unstake'"><Unlock /></el-icon>
            <el-icon v-else-if="tx.type === 'reward'"><Money /></el-icon>
            <el-icon v-else><Promotion /></el-icon>
          </div>
          
          <div class="tx-info">
            <div class="tx-type">{{ getTransactionTypeText(tx.type) }}</div>
            <div class="tx-time">{{ formatTimeAgo(tx.timestamp) }}</div>
          </div>
          
          <div class="tx-amount">
            <div class="amount-value" :class="getAmountClass(tx.type)">
              {{ tx.type === 'reward' ? '+' : '' }}{{ tx.amount.toLocaleString() }} {{ tx.currency }}
            </div>
            <div class="tx-status" :class="tx.status">
              {{ getStatusText(tx.status) }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Lock, 
  Unlock, 
  Promotion, 
  Document, 
  TrendCharts, 
  Picture,
  ArrowRight,
  Money
} from '@element-plus/icons-vue'
import { stakingApiService, type TransactionHistory } from '@/services/stakingApi'
import { formatTimeAgo } from '@/utils/currency'

const recentTransactions = ref<TransactionHistory[]>([])
const lastTxTime = ref(Date.now() - 3 * 60 * 60 * 1000) // 3小时前

const loadRecentTransactions = async () => {
  try {
    const result = await stakingApiService.getTransactionHistory(1, 3)
    recentTransactions.value = result.transactions
    if (result.transactions.length > 0) {
      lastTxTime.value = result.transactions[0].timestamp
    }
  } catch (error) {
    console.error('거래 내역 로드 실패:', error)
  }
}

const getTransactionTypeText = (type: string): string => {
  const typeMap: Record<string, string> = {
    stake: '스테이킹',
    unstake: '언스테이킹',
    reward: '보상 수령',
    transfer: '전송'
  }
  return typeMap[type] || type
}

const getStatusText = (status: string): string => {
  const statusMap: Record<string, string> = {
    completed: '완료',
    pending: '처리 중',
    failed: '실패'
  }
  return statusMap[status] || status
}

const getAmountClass = (type: string): string => {
  return type === 'reward' ? 'positive' : 'neutral'
}

const handleStake = () => {
  ElMessage.info('스테이킹 기능은 곧 출시됩니다')
}

const handleUnstake = () => {
  ElMessage.info('언스테이킹 기능은 곧 출시됩니다')
}

const handleTransfer = () => {
  ElMessage.info('전송 기능은 곧 출시됩니다')
}

const handleHistory = () => {
  ElMessage.info('거래 내역 페이지로 이동합니다')
}

const handleDeFi = () => {
  ElMessage.info('DeFi 기능은 곧 출시됩니다')
}

const handleNFT = () => {
  ElMessage.info('NFT 기능은 곧 출시됩니다')
}

onMounted(async () => {
  await loadRecentTransactions()
})
</script>

<style scoped lang="scss">
.quick-actions {
  .actions-header {
    margin-bottom: 24px;

    .actions-title {
      font-size: 20px;
      font-weight: 600;
      color: #1a202c;
      margin: 0 0 4px 0;
    }

    .actions-subtitle {
      font-size: 14px;
      color: #64748b;
    }
  }

  .actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 32px;

    .action-card {
      background: white;
      border-radius: 12px;
      padding: 20px;
      border: 1px solid #e2e8f0;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 16px;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        border-color: #cbd5e1;
      }

      .card-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        .el-icon {
          font-size: 24px;
          color: white;
        }
      }

      .card-content {
        flex: 1;

        .card-title {
          font-size: 16px;
          font-weight: 600;
          color: #1a202c;
          margin: 0 0 4px 0;
        }

        .card-description {
          font-size: 13px;
          color: #64748b;
          line-height: 1.4;
          margin: 0 0 8px 0;
        }

        .card-stats {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .stat-label {
            font-size: 11px;
            color: #64748b;
          }

          .stat-value {
            font-size: 12px;
            font-weight: 600;
            color: #1a202c;

            &.positive {
              color: #10b981;
            }
          }
        }
      }

      .card-arrow {
        .el-icon {
          color: #94a3b8;
          font-size: 16px;
        }
      }

      &.stake-card .card-icon {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      &.unstake-card .card-icon {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      &.transfer-card .card-icon {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      &.history-card .card-icon {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }

      &.defi-card .card-icon {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      }

      &.nft-card .card-icon {
        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
      }
    }
  }

  .recent-transactions {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;

    .transactions-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .transactions-title {
        font-size: 18px;
        font-weight: 600;
        color: #1a202c;
        margin: 0;
      }

      .el-button {
        font-size: 14px;
        padding: 0;

        .el-icon {
          margin-left: 4px;
        }
      }
    }

    .transactions-list {
      display: flex;
      flex-direction: column;
      gap: 16px;

      .transaction-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        background: #f8fafc;
        border-radius: 10px;
        border: 1px solid #f1f5f9;

        .tx-icon {
          width: 36px;
          height: 36px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;

          .el-icon {
            font-size: 16px;
            color: white;
          }

          &.stake {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }

          &.unstake {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }

          &.reward {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
          }

          &.transfer {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }
        }

        .tx-info {
          flex: 1;

          .tx-type {
            font-size: 14px;
            font-weight: 600;
            color: #1a202c;
            margin-bottom: 2px;
          }

          .tx-time {
            font-size: 12px;
            color: #64748b;
          }
        }

        .tx-amount {
          text-align: right;

          .amount-value {
            font-size: 14px;
            font-weight: 600;
            color: #1a202c;
            margin-bottom: 2px;

            &.positive {
              color: #10b981;
            }
          }

          .tx-status {
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 500;

            &.completed {
              background: #dcfce7;
              color: #166534;
            }

            &.pending {
              background: #fef3c7;
              color: #92400e;
            }

            &.failed {
              background: #fee2e2;
              color: #991b1b;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .quick-actions {
    .actions-grid {
      grid-template-columns: 1fr;
      gap: 12px;

      .action-card {
        padding: 16px;

        .card-icon {
          width: 40px;
          height: 40px;

          .el-icon {
            font-size: 20px;
          }
        }
      }
    }

    .recent-transactions {
      padding: 20px;

      .transactions-list {
        .transaction-item {
          padding: 12px;
        }
      }
    }
  }
}
</style>